.container {
  $rd: 360deg;
  display: grid;
  /* 4x4 网格 */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
    'A A A B'
    'D a b B'
    'D d c B'
    'D C C C'
  ;
  gap: 8px;

  animation: parent 10s infinite linear;

  width: 500px;
  height: 500px;
  margin: 200px auto;


  .grid_item {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 2px solid black;

    @each $index, $char in (1,A) (2,B) (3,C) (4,D) (5,a) (6,b) (7,c) (8,d) {
      &:nth-child(#{$index}) {
        grid-area: $char;
      }
    }


    img {
      // $rd: -360deg;
      width: 350%;
      height: 350%;
      object-fit: cover;
      /*避免图片失去比例*/

      animation: children 10s infinite linear;
    }
  }

  @keyframes parent {
    to {
      transform: rotate($rd);
    }
  }

  @keyframes children {
    to {
      transform: rotate(-360deg);
    }
  }
}